<template>
  <div class="goods-list-page">
    <page-header-wrapper>
      <page-tab-list>
        <div class="table-page-search-box">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="8" :sm="24">
                <a-form-item label="商品名称">
                  <a-input-search v-model="queryParam.name" placeholder="请输入商品名称搜索" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="">
                  <a-button type="primary" @click="refresh"> 查询 </a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </page-tab-list>
      <a-space direction="vertical" size="middle">
        <a-card :bordered="false">
          <a-space direction="vertical" size="middle">
            <div class="table-operator">
              <!-- <NoBorderRadio @onChange="callback" :options="options" :defaultValue="1"></NoBorderRadio> -->
              <a-radio-group :defaultValue="1" v-model="queryParam.status" @change="callback">
                <a-radio-button :value="-1">全部 </a-radio-button>
                <a-radio-button :value="1">上架中 </a-radio-button>
                <a-radio-button :value="0">已下架 </a-radio-button>
              </a-radio-group>
              <div style="float: right; display: inline-block">
                <a-space class="table-operator">
                  <a-dropdown>
                    <a-menu slot="overlay">
                      <a-menu-item key="1" @click="updateAll('status', 1)">批量上架 </a-menu-item>
                      <a-menu-item key="2" @click="updateAll('status', 0)">批量下架 </a-menu-item>
                    </a-menu>
                    <a-button> 批量设置 <a-icon type="down" /> </a-button>
                  </a-dropdown>
                </a-space>
              </div>
            </div>
            <div class="notice-box" v-if="book_goods_ids.length > 0">
              <a-icon type="exclamation-circle" theme="twoTone" two-tone-color="#f9ad18" />
              请注意：预约商品ID:
              <router-link v-for="(item, index) in book_goods_ids" :key="index" :to="'/goods/edit?id=' + item"
                >{{ item }}
                <template v-if="book_goods_ids.length - 1 != index">,</template>
              </router-link>
              不及时补充日期预约相关数据，将作自动下架处理
            </div>
            <div>
              <!-- 商品列表 -->
              <GoodsTable
                ref="goodsTable"
                :queryParam="queryParam"
                :status="currentTab"
                type="cloud"
                @onBookGoodsIds="onBookGoodsIds"
              ></GoodsTable>
            </div>
          </a-space>
        </a-card>
      </a-space>
      <CSVUploadModal :visible.sync="isShowCSVModal"></CSVUploadModal>
    </page-header-wrapper>
  </div>
</template>

<script>
import { STable } from '@/components'
import { list as catListApi } from '@/api/goods/cat'
import CSVUploadModal from './components/CSVUploadModal'
import GoodsTable from './components/CloudGoodsTable.vue'
import tabList from '@/views/saas/components/tabList.vue'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'GoodsList',
  components: {
    tabList,
    STable,
    CSVUploadModal,
    NoBorderRadio,
    GoodsTable,
  },
  data() {
    return {
      tabList: [
        {
          key: 'purchaseGoodsList',
          name: '云仓选品库',
        },
        {
          key: 'goodsCloudList',
          name: '我的云仓',
        },
        {
          key: 'purchaseTransRecord',
          name: '云仓转单',
        },
        {
          key: 'businessPurchaseBalance',
          name: '我的账户',
        },
        {
          key: 'purchaseSetting',
          name: '云仓设置',
        },
        {
          key: 'purchaseGoodsUpdateLog',
          name: '商品更新记录',
        },
        // {
        //     key:'businessPurchaseRecharge',
        //     name:'充值记录'
        // }
      ],

      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '上架中',
          value: 1,
        },
        {
          title: '已下架',
          value: 0,
        },
      ],
      currentTab: -1,
      catList: [],
      book_goods_ids: [],
      queryParam: {
        name: '',
        cat_id: 0,
        status: -1,
        mch_id: 0,
        product_type: '0',
        is_cloud: true,
      },
      isShowCSVModal: false,
      showCat: true,
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs[this.currentTab].$refs.tableList.refresh(true)
    })
  },
  created() {
    this.getCatList()
  },
  // 离开页面前记录table分页
  beforeRouteLeave(to, from, next) {
    from.meta.pageNo = this.$refs['goodsTable'].pageNo
    from.meta.queryParam = this.queryParam
    next()
  },
  mounted() {
    if (this.$route.meta.queryParam) {
      this.$refs['goodsTable'].pageNo = this.$route.meta.pageNo
      this.queryParam = this.$route.meta.queryParam
    }

    this.$nextTick(() => {
      this.refresh()
    })
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.refresh()
      })
    },
  },
  methods: {
    onCascaderChange(val) {
      this.queryParam.cat_id = val[val.length - 1]
    },
    resetValue() {
      this.queryParam = { status: this.queryParam.status }
      this.showCat = false
      setTimeout(() => {
        this.showCat = true
      }, 200)
    },
    onBookGoodsIds(value) {
      console.log(value)
      if (value) {
        this.book_goods_ids = value
      }
    },
    callback(e) {
      console.log(e)
      let value = e.target.value
      this.currentTab = value
      this.queryParam.status = value
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.goodsTable.getGoodsData()
      })
    },
    onEdit(id) {
      if (id > 0) {
        this.$router.push({ name: 'GoodsEdit', query: { id: id } })
      } else {
        this.$router.push({ name: 'GoodsEdit' })
      }
    },
    updateAll(type, status) {
      this.$refs.goodsTable.updateAll(type, status)
    },
    /**
     * 获取分类
     */
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data.list
      })
    },
    updateParam(value, type) {
      this.queryParam[type] = value
    },
  },
}
</script>
<style lang="less" scoped>
.goods-list-page {
  .ant-space-vertical {
    width: 100%;
  }
  .table-operator {
    margin-bottom: 0;
  }
  .fixPosition {
    display: inline-block;
    transform: translateX(-18px);
    color: transparent;
    cursor: pointer;
  }
  .text_ellipsis {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .table_operator_icon {
    font-size: 18px;
    padding: 0 5px;
    color: rgb(182, 182, 182);
    cursor: pointer;
    &:hover {
      color: rgb(24, 144, 255);
    }
  }
  .permission-form {
    /deep/ .permission-group {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .search-item {
    margin-left: 10px;
  }
  .min_top_height {
    /deep/.ant-card-body {
      padding-top: 10px;
    }
  }
  .notice-box {
    width: 100%;
    height: 40px;
    background: #fefbe6;
    border: 1px solid #ffe58f;
    display: flex;
    align-items: center;
    padding: 0 16px;
    .anticon {
      margin-right: 5px;
    }
  }
}
</style>
